<template>
    <div>
        <el-form ref="form" :rules="rules" :model="form" label-width="120px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="小区"  prop="area">
                        <el-input v-model="form.area"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="手机号"  prop="phone">
                <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item label="身份证">
                <el-input v-model="form.idcard"></el-input>
            </el-form-item>
            <el-form-item label="家庭住址">
                <el-input v-model="form.address"></el-input>
            </el-form-item>
            <el-form-item label="车牌号">
                <el-input v-model="form.carNum"></el-input>
            </el-form-item>
            <el-form-item label="是否健康">
                <el-radio-group v-model="form.isHealthy">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="体温">
            <el-input-number v-model="form.temper" :min="35" :max="42"></el-input-number>
            </el-form-item>
            <el-form-item label="有无重点疫区居住、旅行、接触史" label-width="250px">
                <el-radio-group v-model="form.history">
                <el-radio :label="0">无</el-radio>
                <el-radio :label="1">有</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="form.desc" rows="4"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">保存</el-button>
                <el-button>取消</el-button>
            </el-form-item>
            </el-form>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        form: {
            area:'',
            name: '',
            phone:'',
            idcard:'',
            address:'',
            carNum:'',
            isHealthy:0,
            temper:undefined,//数字类型，没有默认值时，填undefined
            history:0,
            desc: '',
            
        },
        // 校验的第一部分，编写规则
        rules:{
            name:[
                { required: true, message: '请输入姓名', trigger: 'blur' },
                { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
            ],
            area:[
                { required: true, message: '请输入小区名', trigger: 'blur' },
                { min: 4, max: 10, message: '长度在 4 到 10 个字符', trigger: 'blur' }
            ],
            phone:[
                { required: true, message: '请正确输入手机号', trigger: 'blur' },
                { min: 11, max: 11, message: '长度为11个字符', trigger: 'change' },
                {
                    pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
                    message: '请输入正确的手机号码'

                }
            ],
        },
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
        this.$refs["form"].validate(
            (valid) => {    //箭头函数、lamble表达式，相当于匿名函数的简化写法
                if (valid) {   //形参值为true说明验证通过,符合所有的校验规则
                    this.$message({
                        message: '保存成功',
                        type: 'success'
                    });   //演示，真正的代码要通过axios发ajax请求到服务器
                } else {   //说明验证不通过，不符合某一检验规则
                    console.log('error submit!!');
                    return false;
                }
            });
      }
    }
  }
</script>